<template>
    <div class="app-container" v-loading="loading" element-loading-text="加载中...">
        <div class="app-container-inner">
            <h4 class="title_inf">账户余额</h4>
            <section class="left_right_sty">
                <div class="account_sty">
                    <p class="p_sty">账户余额(元) <span class="tip">{{ detailData?.settlementType == 1 ? '预充值商家' : '月结商家' }}</span>
                    </p>
                    <p class="acc_money"><span class="tip_sty">￥{{
        detailData?.money.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') }}</span> <el-button
                            class="btn_vo" color="#007cff" @click="goVoucher">充值</el-button></p>
                </div>
                <div class="gy_sty">=</div>
                <div class="account_sty">
                    <p class="p_sty">占用余额(元) <el-tooltip class="box-item" effect="dark" content="下单即锁定费用"
                            placement="top-end">
                            <el-icon  color="#ccc" size="20">
                                <QuestionFilled />
                            </el-icon>
                        </el-tooltip><span class="page_go_style" @click="goDetailList(1)">占用记录</span></p>
                    <p class="acc_money"><span class="tip_sty_">￥{{
        detailData?.freezeMoney.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') }}</span></p>
                </div>
                <div class="gy_sty">+</div>
                <div class="account_sty">
                    <p class="p_sty">可下单金额(元)
                        <!-- <el-tooltip class="box-item" effect="dark" content="=账户余额-占用金额"
                            placement="top-end">
                            <el-icon color="#ccc" size="20" class="tip">
                                <QuestionFilled />
                            </el-icon>
                        </el-tooltip> -->
                    </p>
                    <p class="acc_money"><span class="tip_sty_">￥{{
        (detailData?.money - detailData?.freezeMoney).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g,
            '$1,') }}</span></p>
                </div>

                <div class="account_sty link">
                    <p class="p_sty">累计充值(元) <span class="page_go_style" @click="goDetailList(3)">充值记录</span></p>
                    <p class="acc_money"><span class="tip_sty_">￥{{
        detailData?.money.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') }}</span></p>
                </div>
            </section>
            <h4 class="title_inf">费用概览<span class="page_go_style" @click="goDetailList(2)">账单明细</span></h4>
            <section style="flex: 1;">
                <el-table border stripe resizable :data="tableData" style="width: 100%" height="100%">
                    <el-table-column show-overflow-tooltip prop="billTime" label="账单月份" min-width="150" />
                    <el-table-column show-overflow-tooltip prop="outBillTime" label="出账时间" min-width="150" />
                    <el-table-column show-overflow-tooltip prop="status" label="状态" min-width="150">
                        <template v-slot="i">
                            <span :style="{ color: i.row.status == 2 ? 'rgba(255, 0, 0, 1)' : '' }"> {{
        i.row.status == 3 ? '已结清' : i.row.status == 2 ? '未结清' : '出账中' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="orderTotalPrice" align="right" label="工单总金额"
                        min-width="150">
                        <template v-slot="i">
                            ￥{{ i.row.orderTotalPrice.toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="qty" label="工单数量" min-width="150" align="right" />
                    <el-table-column show-overflow-tooltip prop="deductionTotalPrice" label="扣款总金额" align="right"
                        min-width="150">
                        <template v-slot="i">
                            ￥{{ i.row.deductionTotalPrice.toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="waitPaymentTotalPrice" label="待付总金额" align="right"
                        min-width="150">
                        <template v-slot="i">
                            <span :style="{ color: i.row.status != 3 ? 'rgba(255, 0, 0, 1)' : '' }"> ￥{{
                                i.row.waitPaymentTotalPrice.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="操作" min-width="100">
                        <template v-slot="i">
                            <div class="handle_btn">
                                <span class="btn_" @click="goDetailList(2)">详情</span>
                                <span class="btn_" v-if="i.row.status" @click="goVoucher">去充值</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </section>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getFactoryBalance, getTotalRecharge, getMonthBillOverviewList } from '../../api/finance'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '../../router'
const loading = ref(false)
const detailData = ref()
const tableData = ref([])
// 
const getFactoryBalanceData = () => {

    getFactoryBalance().then(res => {
        if (res) {

            if (!res.data.success) {
                ElMessage({
                    showClose: true,
                    message: res.data.message,
                    type: 'error',
                })
            } else {
                detailData.value = res.data.data.row
            }
        }
    })
}
// 累计充值
const total = ref(0)
const getTotalRechargeData = () => {
    getTotalRecharge().then(res => {
        if (res) {
            if (!res.data.success) {
                ElMessage({
                    showClose: true,
                    message: res.data.message,
                    type: 'error',
                })
            } else {
                total.value = res.data.data.row
            }
        }
    })
}
// 月概览
const getMonthBillOverviewListObj = () => {
    getMonthBillOverviewList().then(res => {
        tableData.value = res.data.data.rows
    })
}
// 去充值
const goVoucher = () => {
    router.push('/voucher/detail')
}
const goDetailList = (n) => {
    switch (n) {
        case 1:
            router.push('/finance/settlement')
            break;
        case 2:
            router.push('/finance/freezing')
            break;
        case 3:
            router.push('/voucher/topup')
            break;
    }
}
onMounted(() => {
    loading.value = true
    Promise.all([getFactoryBalanceData(),
    getTotalRechargeData(),
    getMonthBillOverviewListObj()]).then(res => {
        loading.value = false
    })

})
</script>

<style scoped lang="scss">
@import './index.scss'
</style>